<template>
  <div class="bg">
    <div id="register">
      <h2>注册页面</h2>
      <el-form ref="form" :model="form" label-width="25%">
        <el-form-item label="用户名:">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密  码:">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary"  @click="register" style="width:60%">注册</el-button>
        <el-button type="primary"  @click="goback">返回</el-button>
      </div>
        
    </div>
    </div>
</template>

<script>
import { registry } from "@/api/user";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      isnull: false,
    };
  },

  methods: {
    register() {
      let _this = this;
      if (this.form.username == "") {
        this.$message.error("用户名不能为空");
      } else if (this.form.password == "") {
        this.$message.error("密码不能为空");
      } else {
        var jsData = {
          username: this.form.username,
          password: this.form.password,
        };
        registry(jsData)
          .then(function (res) {
            console.log(res);
            if (res.code == 200) {
              _this.$message.success(res.message);
              _this.$router.push("/login");
              /*this.$alert('是否返回登录页面', '注册成功', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push('/login')
              }
            })*/
            }
          })
          .catch((err) => {
            console.log("操作失败" + err);
          });
      }
    },
    goback(){
       this.$router.push('/login')
    }
  },
};
</script>

<style scoped>
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../../assets/images/register_bg.jpg");
  background-size: 100% 100%;
}
#register {
  height: 350px;
  width: 450px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
  background: #ffffff;
  opacity: 0.85;
  position: absolute;
  top: 20%;
  left: 40%;
  text-align: center;
  display: flex;
  flex-direction: column; /*横向*/
  padding: 30px;
}
#register h2 {
  padding-bottom: 30px;
}
.btn {
  width: 60%;
  margin: auto;
}
</style>